import { Component } from '@angular/core';
import { NavController, NavParams, LoadingController, Loading, ModalController, AlertController} from 'ionic-angular';
import { DataService } from '../../services/data';
import { Storage } from '@ionic/storage';
import { AppGlobal } from '../../app/app.global';
import { LoginPage } from '../login/login';
import { FeedbackPage } from '../feedback/feedback';
import { AboutPage } from '../about/about';
import Avatars from '@dicebear/avatars';
import SpriteCollection from '@dicebear/avatars-identicon-sprites';
import {DomSanitizer} from '@angular/platform-browser'

/*
  Generated class for the My page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  selector: 'page-my',
  templateUrl: 'my.html',
  providers: [DataService]
})
export class MyPage {

  user: any = { email: '', name: '', id: 0 };
  loader:Loading;
  isLogin: boolean = false;
  icon:any;
  unlogin:any = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1533262895956" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1787" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M1022 513.2C1022 795.6 793.6 1024 511.2 1024S0.4 795.6 0.4 513.2C0.4 297.6 135.2 113 325.4 37.8 382 15.2 446 2.4 511.2 2.4s129.2 12.8 185.8 35.4C887.2 113 1022 297.6 1022 513.2z m-706.6-106.4c0 86.6 44 160.4 107.8 197.2 27 15.6 56.8 24.2 88 24.2s59.6-8.6 85.2-22.8c65.2-35.4 110.6-110.6 110.6-198.6 0-122-88-221.4-195.8-221.4s-195.8 99.4-195.8 221.4z m197.2 584.6c149 0 282.4-68.2 370.4-176-10-85.2-92.2-157.4-210-193-44 39.8-100.8 63.8-161.8 63.8-62.4 0-120.6-25.6-164.6-66.6-113.6 32.6-197.2 99.4-215.6 177.4 85 117.8 225.6 194.4 381.6 194.4z" fill="#a1a1a1" p-id="1788"></path></svg>'
  avatars = new Avatars(SpriteCollection);

  constructor(public navCtrl: NavController, private sanitizer: DomSanitizer, public modalCtrl: ModalController, public navParams: NavParams, public dataService: DataService, public storage: Storage, public loadingCtrl: LoadingController, public alertCtrl: AlertController) {
    
    this.icon = this.sanitizer.bypassSecurityTrustHtml(this.unlogin);
  }

  ionViewDidEnter() {
    if (AppGlobal.getInstance().isLogin && this.user.id == 0) {
      this.isLogin = true;
      this.dataService.getUserDetail().subscribe(data => {
        console.log(data)
        if(data.code == 0){
          this.user = data.user;
          this.icon = this.sanitizer.bypassSecurityTrustHtml(this.avatars.create(this.user.id));
        }
      });
    }
  }
  // ionViewDidLoad() {
  //   if (!AppGlobal.getInstance().isLogin) {
  //     this.login();
  //   }
  // }

  login() {
    // let modal = this.modalCtrl.create(LoginPage, {canBack: true});
    // modal.present();
    this.navCtrl.push(LoginPage, {canBack: true})
  }

  logout() {
    this.storage.remove('user');
    AppGlobal.getInstance().logout();
    this.storage.remove('CurrentUserInfo');
    this.user = { email: '', name: '', id: 0 };
    this.isLogin = false;

    let alert = this.alertCtrl.create({
      title: '提示',
      subTitle: "退出成功",
      buttons: [
        {
          text: 'OK',
          handler: () => {
            this.icon = this.sanitizer.bypassSecurityTrustHtml(this.unlogin);
          }
        }
      ]
    });
    alert.present();

  }

  shareRecord(){
    this.alertCtrl.create({
      title: '提示',
      subTitle: "功能开发中，敬请期待 ~ ",
      buttons: [
        {
          text: 'OK',
          handler: () => {
          }
        }
      ]
    }).present();
  }

  feedback(){
    if(AppGlobal.getInstance().isLogin){
      this.navCtrl.push(FeedbackPage)
    }else{
      this.login()
    }
  }

  about(){
    this.navCtrl.push(AboutPage)
  }
}